<template>
	<view class="pathway on-pathway" @touchend="onEnd">
		<view class="tips">
			<!-- <text v-if="isOk" style="color: #FFFFFF;">{{successText}}</text> -->
			<template>
				<image src="/static/images/index/arrow-slide.png"></image>
				<text class="right"> {{label}}</text>
			</template>

		</view>
		<view class="track" :class="[isOk?'ok':'']" :style="{'transform':'translateX('+oldx+'px)'}"></view>
		<movable-area>
			<movable-view @htouchmove="htouchmove" class="on-track" :class="[status,{'active':isOk}]" :x="x" direction="horizontal" @change="onMove"
				:disabled="disabled || isOk" :animation="false" :damping="40"></movable-view>
		</movable-area>
	</view>
</template>

<script>
	export default {
		name: 'slide-lock',
		props: {
			label: {
				type: String,
				default: ''
			},
			successText: {
				type: String,
				default: '操作成功'
			},
			initX: {
				type: Number,
				default: 0
			},
			disabled:{
				type:Boolean,
				default: false
			},
			status:{
				type:String,
				default: 'status-default'
			}
		},
		data() {
			return {
				x: this.initX,
				oldx: this.initX,
				isOk: false,
				size: {},
				count: 0,
				isMove: true
			};
		},
		mounted() {
			let getSize = (selector) => {
				return new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().in(this).select(selector);
					view.fields({
						size: true,
					}, (res) => {
						resolve(res.width);
					}).exec();
				});
			}
			this.$nextTick(() => {
				getSize(".on-pathway").then((res1) => {
					this.size.pathway = res1;
					getSize(".on-track").then((res2) => {
						this.size.track = res2;
						this.$store.commit("setInitxWidth",res1 - res2);
					});
				})
			})
		},
		methods: {
			htouchmove(e){
					this.isMove = true;
			},
			/* 滑动中 */
			onMove(e) {
				if(this.isMove){
					this.oldx = e.detail.x;
				}
			},
			/* 滑动结束 */
			onEnd() {
				console.log("this.isOk",this.isOk);
				this.isMove = false;
				if (this.isOk) {
					this.$emit("tip");
					return;
				}

				this.count++;
				this.x = this.oldx;

				if (this.oldx <= 0) {
					this.isOk = true;
					this.$emit("result", {
						flag: true,
						count: this.count
					});
				} else {
					this.$nextTick(() => {
						//setTimeout(() => {
							this.x = this.initX;
							this.oldx = this.initX;
						//}, 100);
					});
					this.$emit("result", {
						flag: false,
						count: this.count
					});
				}
			},
			/* 重置 */
			reset() {
				this.x = this.initX || (this.size.pathway - this.size.track) || 0;
				this.oldx = this.initX || (this.size.pathway - this.size.track) || 0;
				this.count = 0;
				this.isOk = false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.pathway {
		transform: revert;
		height: 110rpx;
		width: 100%;
		//background-color: #4db6f0;
		background: linear-gradient(90deg, #F9F9F9 0%, #F1F1F1 100%);
		position: relative;
		overflow: hidden;
		border-radius: 20rpx;
		//box-shadow: 1rpx 1rpx 10rpx 0rpx rgba(0,0,0,0.5);

		/* 提示信息 */
		.tips {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			line-height: 110rpx;
			text-align: center;
			color: #333333;
			font-size: 24rpx;
			z-index: 3;
			//background: #4db6f0;
			background: transparent;

			image {
				width: 74rpx;
				height: 20rpx;
				display: inline-block;
				vertical-align: middle;
				transform: rotate(180deg);
			}

			.right {
				position: absolute;
				//right: 20rpx;
				left: 20rpx;
			}
		}

		/* 滑动轨道 */
		.track {
			position: absolute;
			top: 0;
			left: 0;
			//background-color: #eeeeee;
			//background: linear-gradient(-90deg, #F9F9F9 0%, #F1F1F1 100%);
			// background-color: #4db6f0;
			width: 100%;
			height: 100%;
			padding-left: 0;
			box-sizing: content-box;
			transform: translateX(0);
			border-top-left-radius: 20rpx;
			border-bottom-left-radius: 20rpx;
		}

		movable-area {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			background: none;
			z-index: 5;
		}

		movable-view {
			height: 110rpx;
			width: 180rpx;
			margin-top: 5rpx;
			box-sizing: border-box;
			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
			border-radius: 20rpx;
			//border: #dddddd solid 1px;
			//background: linear-gradient(-45deg, #333333 1%, #414141 100%);
		}

		movable-view::before {
			content: '';
			display: block;
			width: 38rpx;
			height: 48rpx;
			background-image: url("");
			background-position: center;
			background-repeat: no-repeat;
			background-size: 100%;
			margin: 0 auto;
			margin-top: 28rpx;

		}

		movable-view.active::before {
			background-image: url("");
		}

		/* 禁止 */
		.disabled {
			position: absolute;
			z-index: 10;
			height: 100%;
			width: 100%;
			top: 0;
			left: 0;
		}
	}
</style>
